<template>
  <view class="content">
    <!-- 方式1：使用微信开放能力按钮 -->
    <button open-type="share">分享给朋友</button>
    
    <!-- 方式2：自定义分享按钮 -->
    <view class="share-btn" @tap="handleShare">
      <text>点击分享</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 分享信息
      shareInfo: {
        title: '分享标题',
        path: '/pages/index/index',
        imageUrl: '/static/share-img.png',
      }
    }
  },
  
  // 定义页面分享内容（小程序分享到聊天）
  onShareAppMessage(options) {
    return {
      title: this.shareInfo.title,
      path: this.shareInfo.path,
      imageUrl: this.shareInfo.imageUrl,
      success(res) {
        uni.showToast({
          title: '分享成功'
        })
      },
      fail(err) {
        uni.showToast({
          title: '分享失败',
          icon: 'none'
        })
      }
    }
  },
  
  // 定义分享到朋友圈
  onShareTimeline() {
    return {
      title: this.shareInfo.title,
      query: 'from=timeline',
      imageUrl: this.shareInfo.imageUrl
    }
  },
  
  methods: {
    // 自定义分享按钮处理
    handleShare() {
      uni.showShareMenu({
        withShareTicket: true,
        menus: ['shareAppMessage', 'shareTimeline']
      })
    }
  }
}
</script>

<style>
.share-btn {
  padding: 20rpx;
  background: #007AFF;
  color: #fff;
  border-radius: 8rpx;
  text-align: center;
  margin: 20rpx;
}
</style>